<template>
  <div>
    <table class="table table-condensed">
      <caption>编排工序</caption>
      <thead>
      <tr>
        <th>名称1</th>
        <th>名称2</th>
        <th>名称3</th>
      </tr>
      </thead>
      <draggable class="list-group" v-model="tableData" element="tbody" :options="{draggable: '.cell'}"
                 :move="getdata" @update="datadragEnd">
        <tr class="row" v-for="(item,index) in tableData" :key="'item'+index">
          <td class="cell">{{item.barCode}}</td>
          <td class="cell">{{item.name}}</td>
          <td class="cell">{{item.unit}}</td>
        </tr>
      </draggable>
    </table>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'DraggableTable',
  components: {
    'draggable': draggable
  },
  props: {
    // tableData: {
    //   type: Array,
    //   default: []
    // },
    // tableColumns: {
    //   type: Array,
    //   default: []
    // },
    showBorder: {
      type: Boolean,
      default: true
    },
    showStripe: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    fixedHeader: {
      type: Boolean,
      default: true
    },
    tableSize: {
      type: String,
      default: 'default'
    },
    tableHeight: {
      type: [Number, String]
    }
  },
  data () {
    return {
      tableData: [
        {
          barCode: '000001',
          name: '王小明',
          unit: 18
        },
        {
          barCode: '000002',
          name: '王小明',
          unit: 18
        },
        {
          barCode: '000003',
          name: '王小明',
          unit: 18
        },
        {
          barCode: '000004',
          name: '王小明',
          unit: 18
        }
      ]
    }
  },
  computed: {
    tableColumns () {
      let columns = []
      if (this.showIndex) {
        columns.push({
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        })
      }
      columns.push({
        type: 'html',
        title: '节次',
        key: 'section',
        align: 'center',
        width: 80
      })
      columns.push({
        type: 'html',
        title: '8B302',
        key: '_8B302',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B303',
        key: '_8B303',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B304',
        key: '_8B304',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B305',
        key: '_8B305',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B306',
        key: '_8B306',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B403',
        key: '_8B403',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B404',
        key: '_8B404',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B405',
        key: '_8B405',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B407',
        key: '_8B407',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B408',
        key: '_8B408',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B409',
        key: '_8B409',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '8B413',
        key: '_8B413',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '9B108',
        key: '_9B108',
        align: 'center',
        minWidth: 150
      })
      columns.push({
        type: 'html',
        title: '9B201-1',
        key: '_9B201-1',
        align: 'center',
        minWidth: 150
      })
      return columns
    }
  },
  methods: {
    getdata (data) {
      // console.log('getdata方法');
    },
    datadragEnd (evt) {
      // console.log('datadragEnd方法');
      console.log('拖动前的索引 :' + evt.oldIndex)
      console.log('拖动后的索引 :' + evt.newIndex)
    }
  }
}
</script>

<style lang="less">

</style>
